<template>
  <div style="height:6vh;padding: 10px 20px;background-color:#fff;">
    <span style="line-height: 60px;font-size:20px;">宠物品种管理</span>
    <el-button type="primary" style="float:right;margin-top: 10px;" @click="openAddDialog">新增宠物品种</el-button>
  </div>

  <el-card style="height: 70px;margin: 20px;">
    <el-form :inline="true">
      <el-form-item label="宠物种类搜索" style="width: 220px;">
        <el-input placeholder="输入宠物种类" v-model="searchPetBreedsForm.name" @keydown.enter="loadPetBreeds"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadPetBreeds">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-table :data="petBreeds" stripe>
    <el-table-column prop="id" label="宠物品种id"></el-table-column>
    <el-table-column prop="name" label="宠物品种名称"></el-table-column>
    <el-table-column prop="appearance" label="外貌特征"></el-table-column>
    <el-table-column prop="personality" label="性格特点"></el-table-column>
    <el-table-column prop="habits" label="生活习性"></el-table-column>
    <el-table-column prop="carePoints" label="饲养要点"></el-table-column>
    <el-table-column prop="commonDiseases" label="常见疾病"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button link type="primary" @click="openEditDialog(scope.row)">编辑</el-button>

        <el-button link type="primary" @click="deletePetBreed(scope.row.id)">删除</el-button>

      </template>
    </el-table-column>
  </el-table>

  <!-- 新增/编辑对话框 -->
  <el-dialog
      :title="dialogTitle"
      style="width: 1000px;padding: 40px;"
      v-model="dialogVisible"
      :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="宠物品种名称">
            <el-input placeholder="请输入宠物品种名称"
                      v-model="currentPetBreed.name"
            :disabled="currentPetBreed.id!=null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="外貌特征">
            <el-input placeholder="请输入外貌特征" v-model="currentPetBreed.appearance"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="性格特点">
            <el-input placeholder="请输入性格特点" v-model="currentPetBreed.personality"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生活习性">
            <el-input placeholder="请输入生活习性" v-model="currentPetBreed.habits"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="饲养要点">
            <el-input placeholder="请输入饲养要点" v-model="currentPetBreed.care_points"></el-input>
          </el-form-item>
          <el-form-item label="常见疾病">
            <el-input placeholder="请输入常见疾病" v-model="currentPetBreed.common_diseases"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="savePetBreed">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import qs from "qs";
import { ElMessage } from "element-plus";


// 定义变量用来控制弹窗是否可见
const dialogVisible = ref(false);
// 定义数组用来保存宠物品种数据
const petBreeds = ref([]);
// 定义变量用来保存宠物种类搜索条件
const searchPetBreedsForm = ref({ name: '' });
// 定义变量用来保存当前操作的宠物品种数据
const currentPetBreed = ref({
  id: null,
  name: '',
  appearance: '',
  personality: '',
  habits: '',
  carePoints: '',
  commonDiseases: ''
});
// 定义变量用来保存弹窗的标题
const dialogTitle = ref('新增宠物品种');

// 点击"新增宠物品种"按钮时调用的方法
const openAddDialog = () => {
  dialogTitle.value = '新增宠物品种';
  currentPetBreed.value = {
    id: null,
    name: '',
    appearance: '',
    personality: '',
    habits: '',
    care_points: '',
    common_diseases: ''
  };
  dialogVisible.value = true;
};

// 处理弹窗关闭的方法
const handleClose = () => {
  if (confirm('您确认要关闭弹窗吗?')) {
    currentPetBreed.value = {
      id: null,
      name: '',
      appearance: '',
      personality: '',
      habits: '',
      care_points: '',
      common_diseases: ''
    };
    dialogVisible.value = false;
  }
};

// 新增或更新宠物品种信息
const savePetBreed = () => {
  let data = qs.stringify(currentPetBreed.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/pet_breeds/save',data).then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success('保存成功!');
      currentPetBreed.value = {};//保存成功后要清空弹窗表单并关闭弹窗
      dialogVisible.value = false;
      //新增成功后，需要重新加载所有的宠物数据
      loadPetBreeds();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
};

// 加载宠物品种列表的方法
const loadPetBreeds = () => {
  let data = qs.stringify(searchPetBreedsForm.value);
  axios.get(BASE_URL+'/v1/pet_breeds/select?'+data).then((response)=>{
    if(response.data.code == 2000){
      petBreeds.value = response.data.data;
      console.log(petBreeds.value);
    }else{
      ElMessage.error(response.data.msg);
    }
  })
};

// 页面加载完毕立即调用加载宠物品种的方法
onMounted(() => {
  loadPetBreeds();
});

// 重置搜索的方法
const resetSearch = () => {
  searchPetBreedsForm.value = {}; // 清空搜索条件
  loadPetBreeds(); // 重新加载所有宠物数据
};

// 打开编辑对话框
const openEditDialog = (row) => {
  dialogTitle.value = '编辑宠物品种';
  editedPetBreed.value = { ...row };
  dialogVisible.value = true;
};

// 编辑宠物品种信息
const editedPetBreed = (id) => {
  dialogVisible.value = true;
  dialogTitle.value = '编辑宠物品种';
  axios.get(BASE_URL+'/v1/pet_breeds/select?id='+id).then((response)=>{
    if(response.data.code === 2000){
      currentPetBreed.value = response.data.data[0];
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

// 删除宠物品种
const deletePetBreed = (id) => {
  if(confirm('您确认要删除当前宠物品种吗?')){
    axios.post(BASE_URL+'/v1/pet_breeds/delete/'+id).then((response)=>{
      if(response.data.code==2000){
        ElMessage.success('删除宠物品种成功!')
        loadPetBreeds();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
};
</script>

<style scoped>

</style>